<template>
  <!-- 顶部导航栏 -->
  <el-header class="top-navbar">
    <div class="left-section">
      <router-link to="/" class="logo">{{ logo }}</router-link>
      <el-menu
        class="nav-menu"
        :default-active="activeMenu"
        mode="horizontal"
        @select="handleMenuSelect"
      >
        <el-menu-item index="front-end">前端</el-menu-item>
        <el-menu-item index="java">Java</el-menu-item>
        <el-menu-item index="python">Python</el-menu-item>
        <el-menu-item index="mini-program">小程序</el-menu-item>
      </el-menu>
    </div>
    <el-input
      class="search-input"
      placeholder="搜索"
      v-model="searchKeyword"
      @change="handleSearch"
    ></el-input>
    <div class="right-section">
      <el-link
        class="create-blog-link"
        type="success"
        @click="handleCreateBlogClick"
        >创建博客</el-link
      >
      <el-link class="user-info-link" type="info" @click="handleUserInfoClick"
        >用户信息</el-link
      >
      <el-link
        class="login-link"
        v-if="!isAuthenticated"
        type="info"
        @click="handleLoginClick"
        >登录</el-link
      >
      <el-link
        class="logout-link"
        v-if="isAuthenticated"
        type="danger"
        @click="handleLogoutClick"
        >注销</el-link
      >
    </div>
  </el-header>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// 使用 ref 创建响应式数据
const logo = ref('Your Logo')
const activeMenu = ref('')
const searchKeyword = ref('')
const isAuthenticated = ref(false) // 模拟用户是否已登录

// 使用 useRoute 获取当前路由对象
const route = useRoute()
const router = useRouter()

// 处理导航菜单选择事件
const handleMenuSelect = (index) => {
  activeMenu.value = index
  // 可添加相应的路由跳转或其他处理
  router.push({ path: '/', query: { category: index } })
}

// 处理搜索功能
const handleSearch = () => {
  // 可根据搜索关键字进行路由跳转或其他搜索操作
  console.log('Search:', searchKeyword.value)
  router.push({ path: '/', query: { keyword: searchKeyword.value } })
}

// 处理创建博客点击事件
const handleCreateBlogClick = () => {
  // 可根据用户状态进行路由跳转或其他操作
  console.log('Create Blog clicked')
  router.push('/create-blog')
}

// 处理用户信息点击事件
const handleUserInfoClick = () => {
  // 可根据用户状态进行路由跳转或其他操作
  console.log('User Info clicked')
  router.push('/user-info')
}

// 处理登录点击事件
const handleLoginClick = () => {
  // 可弹出登录框等操作
  console.log('Login clicked')
  isAuthenticated.value = true // 模拟登录成功
}

// 处理注销点击事件
const handleLogoutClick = () => {
  // 模拟注销操作
  isAuthenticated.value = false
  // 可进行路由跳转或其他注销操作
  console.log('Logout clicked')
}

// 监听路由参数变化，更新 activeMenu
watch(
  () => route.query.category,
  (newCategory) => {
    activeMenu.value = newCategory || ''
  }
)
</script>

<style lang="less" scoped>
.top-navbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.left-section {
  display: flex;
  align-items: center;
}

.logo {
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

.nav-menu {
  width: 700px;
  margin: 20px 30px;
}

.search-input {
  width: 200px;
}

.right-section {
  display: flex;
  align-items: center;
}

.create-blog-link,
.user-info-link,
.login-link,
.logout-link {
  font-size: 16px;
  margin-right: 10px;
  text-decoration: none;
  color: #333;
}

.main-content {
  width: 1000px;
  margin: 0 auto;
  padding: 20px;
}
</style>
